<!--
 * @Author: your name
 * @Date: 2021-09-29 00:50:41
 * @LastEditTime: 2021-10-25 23:43:15
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \henghuisheng\components\kefu\kefu.vue
-->
<template>
  <view>
    <u-modal
      v-model="isShow"
      :show-title="false"
      confirm-text="确定"
      @confirm="confirm"
    >
      <view class="slot-content">
        <u-image
          @longtap="handleLongtap"
          width="303rpx"
          height="303rpx"
          src="/static/kefu.jpg"
          mode="widthFix"
        ></u-image>
        <text class="content">
          长按识别二维码添加客服微信
        </text>
      </view>
    </u-modal>
  </view>
</template>
<script>
export default {
  props: {
    isKefuShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isShow: false
    };
  },
  watch: {
    isKefuShow: {
      handler(val) {
        this.isShow = val;
      }
    }
  },
  methods: {
    //   长按事件
    handleLongtap() {
      console.log("123333");
      plus.barcode.scan(
        "/static/image/icon/kefu.jpg",
        (type, res) => {
          uni.hideLoading();
          if (type == 0) {
            plus.runtime.openURL(res);
          }
        },
        e => {
          uni.hideLoading();
          if (e.code == 3) {
            uni.showToast({
              title: "未识别到二维码"
            });
          } else {
            uni.showToast({
              title: "无法识别此图片"
            });
          }
        }
      );
    },
    confirm() {
      this.$emit("update:isKefuShow", false);
    }

    //
  }
};
</script>
<style lang="scss" scoped>
.slot-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 580rpx;
  height: 477rpx;
  margin: 0 auto;
}
.content {
  width: 326rpx;
  height: 24rpx;
  font-size: 24rpx;
  font-family: Source Han Sans CN, Source Han Sans CN-Regular;
  font-weight: 400;
  text-align: center;
  color: #707070;
  line-height: 24rpx;
  letter-spacing: 1rpx;
  margin-top: 30rpx;
}
</style>